/* CSS file */

Application {
	theme-color: #FFFFFF;
    background-color: #101010;
    background-image: "";
    horizontal-align: left;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

ToolTip {
	corner-radius: 0;
	color: #000000;
	background-color: #CFCFCF;
	background-alpha: 0.8;
}

.videoBox {
	background-color: #000000;
	background-alpha: 1.0;
}

.errorText {
	color: #ff8080;
	font-size: 9;
	font-weight: normal;
	text-align: left;
}

.captionBox {
	vertical-gap: 2;
	vertical-align: bottom;
	horizontal-align: left;
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-top: 0;
 	bottom: 10;
 	left: 60;
 	right: 60;
}

.captionText {
	color: #ffffff;
	font-size: 12;
}

.controlBar {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
	horizontal-gap: 0;
	background-color: #b7b8b9;
}

.cardBox {
	corner-radius: 8;
	border-style: solid;
	border-thickness: 0;
}

.cardEditor {
	corner-radius: 8;
	border-style: solid;
	border-thickness: 0;
	skins-count:       5;  /* must match the following arrays length */
	background-colors: #c8c8c8, #c8c8ff, #c8ffc8, #ffc8c8, #c8c8c8;
	title-colors:      #c8c8c8, #a0a0ff, #a0ffa0, #ffa0a0, #a00000;
	title-text-colors: #000000, #000040, #004000, #000000, #ffffff;
	text-colors:       #000000, #000040, #004000, #000000, #000000;
	line-colors:       #515151, #515151, #515151, #515151, #515151;
	name-colors:       #004000, #0000cf, #cf0000, #cf0000, #004000;
	link-colors:       #0000a0, #a00000, #0000a0, #0000a0, #0000a0;
	disabled-colors:   #515151, #515151, #515151, #515151, #c8c8c8;	
}

.cardTitle {
	text-align: center;
	font-size: 10;
	font-weight: bold;
}

.cardName {
	text-align: left;
	font-size: 10;
	font-weight: normal;
}

.cardText {
	border-style: solid;
	border-thickness: 0;
	background-alpha: 0;
	font-size: 8;
	font-weight: normal;
}

.cardCopyright {
	text-align: right;
	padding-left: 8;
	padding-right: 8;
	font-size: 7;
	font-weight: normal;
}

.cardInvalidBox {
	horizontal-center: 0;
	vertical-center: 0;
	vertical-gap: 0;
	background-alpha: 0;
}

.cardInvalidText {
	font-size: 20;
	color: #ff0000;
	stroke-color: #ff0000;
	stroke-width: 1;
}

.cardButtonBar {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
	horizontal-gap: 1;
	background-color: #515151;
	background-alpha: 1.0;
	border-color: #515151;
	border-style: solid;
	border-thickness: 1;
}

.alertBox {
	background-color: #fff4f0;
	background-alpha: 1.0;
	border-style: solid;
	border-color: #a0a0a0;
	border-thickness: 1;
	font-size: 9;
	color: #303030;
	theme-color: #202020;
}

.alertButton {
	corner-radius: 0;
	text-align: center;
	font-weight: normal;
	border-color: #a0a0a0;
	border-style: solid;
	border-thickness: 1;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;
}

.alertTitle {
	color: #303030;
	padding-left: 2;
	padding-right: 2;
	padding-top: 0;
	padding-bottom: 0;
}

.alertCanvas {
	corner-radius: 4;
	background-color: #ffffff;
	background-alpha: 1.0;
	border-style: solid;
	border-color: #d1d7db;
	border-thickness: 1;
}

.alertButtonBar {
	horizontal-gap: 6;
	padding-left: 6;
	padding-right: 6;
	horizontal-align: right;
	vertical-align: middle;
}

.baseBox {
	background-color: #000000;
	border-style: solid;
	border-thickness: 1;
	border-color: #808080;
}


.roomTitle {
	border-style: solid;
	border-thickness: 0;
	background-alpha: 0;
	color: #ffffff;
	font-size: 12;
	text-align: center;
}

.vbuttonBox {
	horizontal-align: center;
	vertical-gap: 4;
	padding-left: 20;
	padding-right: 20;
	padding-top: 0;
	padding-bottom: 0;
}

.chatHistoryBox {
	background-alpha: 0.3;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	vertical-gap: 0;
}

.chatInput {
	theme-color: #000000;
	font-size: 10;
	color: #ffffff;
	disabled-color: #c8c8c8;
	background-color: #000000;
	border-sides: "top right bottom left";
	border-style: solid;
	border-thickness: 1;
	border-color: #404040;
}

.chatHistory {
	theme-color: #000000;
	background-color: #000000;
	background-alpha: 1;
	border-color: #404040;
	border-style: solid;
	border-thickness: 1;
	color: #c8c8c8;
	color-self: #00d090;
	color-remote: #0090d0;
	color-disabled: #808080;
}

.menuBox {
	background-color: #000000;
	background-alpha: 0.9;
	color: #ffffff;
	border-color: #ffffff;
	border-style: solid;
	border-thickness: 1;
	border-sides: "left top right";
	vertical-gap: 1;
	horizontal-align: left;
}

.settingsStyle {
	border-style: solid;
	border-thickness: 0;
	corner-radius: 8;
	padding-top: 5;
	padding-bottom: 0;
	padding-left: 2;
	padding-right: 2;
	vertical-gap: 2;
}

.pauseCanvas {
	background-color: #000000;
	background-alpha: 0.8;
}

.pauseLabel {
	font-size: 16;
	color: #ffffff;
	horizontal-center: 0;
	vertical-center: 0;
}

LinkButton {
	color: #ffffff;
	corner-radius: 0;
	font-weight: normal;
}

TextInput.grey {
	color: #000000;
	background-color: #808080;
	border-style: none;
}


Photo {
	background-color: #606060;
}

Accordion {
	header-style-name: blackButtonStyle;
	background-alpha: 0;
	border-thickness: 0;
	border-style: solid;
	color: #efefef;
	text-roll-over-color: #ffffff;
	text-selected-color: #ffffff;
}

.smallComboBox {
	font-weight: normal;
	corner-radius: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* All boxes */
.windowStyle {
 	horizontal-gap: 0;
 	vertical-gap: 0;
 }

.centerBox {
	vertical-gap: 0;
	horizontal-align: center;
}

/* 0 - intro page */

.introBox, .createBox {
	padding-left: 10;
	padding-right: 10;
	padding-top: 10;
	padding-bottom: 20;
}

introBox.roundedBox {
	background-color: #303030;
	background-alpha: 0.5;
	corner-radius: 20;
	border-style: solid;
	border-thickness: 0;
	padding-left: 40;
	padding-right: 20;
	padding-top: 10;
	padding-bottom: 10;
	vertical-gap: 0;
}

.large {
	color: #ffffff;
	font-weight: normal;
	font-size: 14;
}

.regular {
	color: #ffffff;
	font-weight: normal;
	font-size: 12;
}

.small {
	color: #808080;
	font-weight: normal;
	font-size: 9;
}

TextArea.multiline {
	border-style: solid;
	border-thickness: 0;
	background-alpha: 0;
	color: #515151;
	font-size: 9;
}

Button.signup {
	color: #ffffff;
}

/* 2 - target page */
.targetBox {
}

targetBox.VBox {
	horizontal-align: center;
	vertical-gap: 0;
}

/* All buttons and custom skins */

/* Drag button to resize at bottom-right corner */
.dragButtonStyle {
	skin: ClassReference("my.skins.DragButtonSkin");
	bottom: 1;
	right: 1;
}

/* Default shiny background */
.shinyButtonStyle {
	border-thickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #cacaca, #b8b8b8;
	fill-down-colors: #cacaca, #b8b8b8;
	skin: ClassReference("my.skins.ShinyButtonSkin");
	over-skin: ClassReference("my.skins.ShinyButtonSkin");
}

/* Play and Pause button */
.playButtonStyle {
	border-thickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #a0a0a0, #a0a0a0;
	skin: ClassReference("my.skins.PlayButtonSkin");
	over-skin: ClassReference("my.skins.PlayButtonSkin");
}

/* Record button */
.recordButtonStyle {
	border-thickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #a0a0a0, #a0a0a0;
	skin: ClassReference("my.skins.RecordButtonSkin");
	overSkin: ClassReference("my.skins.RecordButtonSkin");
}

/* Snap button */
.snapButtonStyle {
	border-thickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #a0a0a0, #a0a0a0;
	skin: ClassReference("my.skins.SnapButtonSkin");
	overSkin: ClassReference("my.skins.SnapButtonSkin");
}

/* Camera button */
.camButtonStyle {
	border-thickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #a0a0a0, #a0a0a0;
	skin: ClassReference("my.skins.CamButtonSkin");
	overSkin: ClassReference("my.skins.CamButtonSkin");
}

/* Mic mute and unmute button */
.micButtonStyle {
	border-thickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #a0a0a0, #a0a0a0;
	skin: ClassReference("my.skins.MicButtonSkin");
	overSkin: ClassReference("my.skins.MicButtonSkin");
}

/* Speaker mute and unmute button */
.speakerButtonStyle {
	border-thickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #a0a0a0, #a0a0a0;
	skin: ClassReference("my.skins.SpeakerButtonSkin");
	overSkin: ClassReference("my.skins.SpeakerButtonSkin");
}

/* Volume slider for control */
.volumeSliderStyle {
	border-thickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #cacaca, #b8b8b8;
	fill-down-colors: #cacaca, #b8b8b8;
	disabled-color: #a0a0a0;
	show-track-highlight: true;
	skin: ClassReference("my.skins.ShinyButtonSkin");
	track-skin: ClassReference("my.skins.VolumeTrackSkin");
	track-highlight-skin: ClassReference("my.skins.VolumeHighlightSkin");
	thumb-skin: ClassReference("my.skins.VolumeThumbSkin");
}

/* Volume level for indication */
.volumeLevelStyle {
	border-thickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #cacaca, #b8b8b8;
	fill-down-colors: #cacaca, #b8b8b8;
	skin: ClassReference("my.skins.ShinyButtonSkin");
}

/* Full Screen button  */
.fullScreenButtonStyle {
	borderThickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #a0a0a0, #a0a0a0;
	fill-over-colors: #a0a0a0, #a0a0a0;
	skin: ClassReference("my.skins.FullScreenButtonSkin");
	overSkin: ClassReference("my.skins.FullScreenButtonSkin");
}

/* Text button */
.phoneButtonStyle {
	border-thickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #a0a0a0, #a0a0a0;
	skin: ClassReference("my.skins.PhoneButtonSkin");
	overSkin: ClassReference("my.skins.PhoneButtonSkin");
}

/* Text button */
.textButtonStyle {
	border-thickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #a0a0a0, #a0a0a0;
	skin: ClassReference("my.skins.TextButtonSkin");
	overSkin: ClassReference("my.skins.TextButtonSkin");
}

/* upload control button */
.uploadButtonStyle {
	border-thickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #a0a0a0, #a0a0a0;
	skin: ClassReference("my.skins.UploadButtonSkin");
	overSkin: ClassReference("my.skins.UploadButtonSkin");
}

/* download control button */
.downloadButtonStyle {
	border-thickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #a0a0a0, #a0a0a0;
	skin: ClassReference("my.skins.DownloadButtonSkin");
	overSkin: ClassReference("my.skins.DownloadButtonSkin");
}

/* create button  TODO: replace FullScreenButtonSkin here with actual skin */
.createButtonStyle {
	borderThickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #a0a0a0, #a0a0a0;
	skin: ClassReference("my.skins.FullScreenButtonSkin");
	overSkin: ClassReference("my.skins.FullScreenButtonSkin");
}

/* Trash button. */
.trashButtonStyle {
	border-thickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #a0a0a0, #a0a0a0;
	skin: ClassReference("my.skins.NoAccessSkin");
	over-skin: ClassReference("my.skins.NoAccessSkin");
}

/* left arrow button */
.leftButtonStyle {
	border-thickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #a0a0a0, #a0a0a0;
	skin: ClassReference("my.skins.LeftButtonSkin");
	overSkin: ClassReference("my.skins.LeftButtonSkin");
}

/* right arrow button */
.rightButtonStyle {
	border-thickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #a0a0a0, #a0a0a0;
	skin: ClassReference("my.skins.RightButtonSkin");
	overSkin: ClassReference("my.skins.RightButtonSkin");
}

/* upload control button */
.homeButtonStyle {
	border-thickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #a0a0a0, #a0a0a0;
	skin: ClassReference("my.skins.HomeButtonSkin");
	overSkin: ClassReference("my.skins.HomeButtonSkin");
}

/* color control button */
.colorButtonStyle {
	border-thickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #a0a0a0, #a0a0a0;
	skin: ClassReference("my.skins.ColorButtonSkin");
	overSkin: ClassReference("my.skins.ColorButtonSkin");
}

/* Layout control button */
.layoutButtonStyle {
	border-thickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #a0a0a0, #a0a0a0;
	skin: ClassReference("my.skins.LayoutButtonSkin");
	overSkin: ClassReference("my.skins.LayoutButtonSkin");
}

/* Black shiny background */
.blackButtonStyle {
	border-thickness: 0;
	fill-colors: #181818, #000000;
	fill-over-colors: #181818, #121212;
	fill-down-colors: #000000, #000000;
	color: #808080;
	text-roll-over-color: #ffffff;
	text-selected-color: #ffffff;
	font-weight: normal;
	skin: ClassReference("my.skins.ShinyButtonSkin");
	over-skin: ClassReference("my.skins.ShinyButtonSkin");
}

/* play/pause in video box */
.playVideoButtonStyle {
	border-thickness: 0;
	fill-colors: #404040, #404040;
	fill-over-colors: #686868, #686868;
	color: #c8c8c8;
	skin: ClassReference("my.skins.PlayButtonSkin");
	over-skin: ClassReference("my.skins.PlayButtonSkin");
}

/* Record in video button */
.recordVideoButtonStyle {
	border-thickness: 0;
	fill-colors: #404040, #404040;
	fill-over-colors: #686868, #686868;
	color: #c8c8c8;
	skin: ClassReference("my.skins.RecordButtonSkin");
	overSkin: ClassReference("my.skins.RecordButtonSkin");
}

/* previous/rewind in video box */
.prevVideoButtonStyle {
	border-thickness: 0;
	fill-colors: #404040, #404040;
	fill-over-colors: #686868, #686868;
	color: #c8c8c8;
	skin: ClassReference("my.skins.PrevButtonSkin");
	over-skin: ClassReference("my.skins.PrevButtonSkin");
}

/* next/forward in video box */
.nextVideoButtonStyle {
	border-thickness: 0;
	fill-colors: #404040, #404040;
	fill-over-colors: #686868, #686868;
	color: #c8c8c8;
	skin: ClassReference("my.skins.NextButtonSkin");
	over-skin: ClassReference("my.skins.NextButtonSkin");
}

/* upload in video box */
.uploadVideoButtonStyle {
	border-thickness: 0;
	fill-colors: #404040, #404040;
	fill-over-colors: #686868, #686868;
	color: #c8c8c8;
	skin: ClassReference("my.skins.UploadButtonSkin");
	overSkin: ClassReference("my.skins.UploadButtonSkin");
}

/* download in video box */
.downloadVideoButtonStyle {
	border-thickness: 0;
	fill-colors: #404040, #404040;
	fill-over-colors: #686868, #686868;
	color: #c8c8c8;
	skin: ClassReference("my.skins.DownloadButtonSkin");
	over-skin: ClassReference("my.skins.DownloadButtonSkin");
}

/* Layout control button in video box */
.layoutVideoButtonStyle {
	border-thickness: 0;
	fill-colors: #404040, #404040;
	fill-over-colors: #686868, #686868;
	color: #c8c8c8;
	skin: ClassReference("my.skins.LayoutButtonSkin");
	overSkin: ClassReference("my.skins.LayoutButtonSkin");
}

/* upload control button */
.uploadButtonStyle {
	border-thickness: 0;
	fill-colors: #cacaca, #b8b8b8;
	fill-over-colors: #a0a0a0, #a0a0a0;
	skin: ClassReference("my.skins.UploadButtonSkin");
	overSkin: ClassReference("my.skins.UploadButtonSkin");
}

/* down arrow button */
.downButtonStyle {
	border-thickness: 0;
	fill-colors: #404040, #404040;
	fill-over-colors: #686868, #686868;
	color: #c8c8c8;
	skin: ClassReference("my.skins.DownButtonSkin");
	overSkin: ClassReference("my.skins.DownButtonSkin");
}

/* up arrow button */
.upButtonStyle {
	border-thickness: 0;
	fill-colors: #404040, #404040;
	fill-over-colors: #686868, #686868;
	color: #c8c8c8;
	skin: ClassReference("my.skins.UpButtonSkin");
	overSkin: ClassReference("my.skins.UpButtonSkin");
}


/* No access button */
.noAccessStyle {
	border-thickness: 0;
	fill-colors: #404040, #404040;
	fill-over-colors: #686868, #686868;
	color: #ff0000;
	alpha: 0.5;
	skin: ClassReference("my.skins.NoAccessSkin");
	over-skin: ClassReference("my.skins.NoAccessSkin");
}

/* Photo background */
.photoStyle {
	skin: ClassReference("my.skins.PhotoSkin");
	over-skin: ClassReference("my.skins.PhotoSkin");
	fill-colors: #303030, #303030;
	color: #202020;
	background-color: #303030;
	border-style: none;
	border-thickness: 0;
}

/* post it */
.postit {
	background-color: #FFFF80;
	background-alpha: 0.7;
}

.closebutton {
	corner-radius: 5;
	fill-colors: #808080,#808080;
	color: #ffffff;
	text-roll-over-color: #ffffff;
	font-size: 6;
	bottom: 2;
	right: 2;
	paddingLeft: 0;
	paddingRight: 0;
	paddingTop: 0;
	paddingBottom: 0; 
}

